<template>
  <view class="statistics-container" :style="DynamicHeight">
    <view class="custom-tabs">
      <view class="content-item">
        <view v-for="tab in tabs" :key="tab.id" class="tab-item" :class="{ active: activeTab === tab.id }"
          @click="handleTabClick(tab.id)">
          {{ tab.name }}
        </view>
      </view>
    </view>

    <view class="ment" :style="scrollViewStyle">
      <view class="scroll-content">
        <view class="content-item" :style="contentItemStyle">
          <Teamstatistics v-if="activeTab === 0" />
          <MyStatistisc v-if="activeTab === 1" />
          <holidayStatistics v-if="activeTab === 2" />
          <attendanceTypesetting v-show="activeTab === 3" />
          <teamScheduling :organizationList="organizationList" :setgroupList="setgroupList" v-show="activeTab === 4" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref, onMounted } from "vue";
import { useUserStore } from '@/pinia-store/user';
import MyStatistisc from "./MyStatistics.vue";
import Teamstatistics from "./Teamstatistics.vue";
import holidayStatistics from '../holidayStatistics/index.vue';
import attendanceTypesetting from '../attendanceTypesetting/index.vue'
import teamScheduling from '../teamScheduling/index.vue'
import { getdepartChildBypersiontest, getgroupList } from "@/apis/Attcemannt/index";
const activeTab = ref(1);
const prevTab = ref(1);
const direction = ref('right');
const userStore = useUserStore();
const organizationList = ref([])
const setgroupList = ref([])
const user = ref({})
const tabs = ref([
  // { id: 0, name: "团队统计" },
  // { id: 1, name: "我的统计" },
  // { id: 2, name: "假期统计" },
  { id: 3, name: "我的排班" },
  // { id: 4, name: "团队排班" },
]);

let DynamicHeight = ref({})
let scrollViewStyle = ref({})

const handleTabClick = (id) => {
  const newIndex = tabs.value.findIndex(tab => tab.id === id);
  if (newIndex === -1) return;

  direction.value = newIndex > activeTab.value ? 'right' : 'left';
  prevTab.value = activeTab.value;
  activeTab.value = id;
};


const contentItemStyle = computed(() => {
  if (activeTab.value === 2) {
    return { padding: '0px' }
  } else {
    return { padding: '5px 8px' }
  }
});

const groupList = async () => {
  uni.showLoading({ title: '加载中...' });
  try {
    let res = await getgroupList({
      page: 1,
      row: 50
    })
    if (res.status == 1) {
      uni.hideLoading();
      setgroupList.value = res.data
    } else {
      uni.hideLoading();
      uni.showToast({
        title: res.msg || '获取失败',
        icon: 'error',
        duration: 2000
      });
    }
  } catch (error) {
    uni.hideLoading();
    uni.showToast({
      title: '获取失败',
      icon: 'error',
      duration: 2000
    });
  }
};





onMounted(async () => {
  user.value = userStore.user ? userStore.user : JSON.parse(uni.getStorageSync('user'))?.user
  await groupList()

  // const allowedIds = ['235', '236', '237', '238', '461', '1', '232', '251', '258', '263', '511', '525', '520'];
  // const workerId = userStore.user.worker_id.toString();
  // if (!allowedIds.includes(workerId)) {
  //   tabs.value = [{ id: 3, name: "我的排班" }];
  //   activeTab.value = 3;
  // } else {

  // }
  tabs.value = [
    // { id: 0, name: "团队统计" },
    // { id: 1, name: "我的统计" },
    // { id: 2, name: "假期统计" },
    { id: 3, name: "我的排班" },
    { id: 4, name: "团队排班" },
  ]

  activeTab.value = 3;

  let height = (uni.getSystemInfoSync().windowHeight || uni.getSystemInfoSync().screenHeight) || 0
  // #ifdef APP-PLUS
  DynamicHeight.value = {
    height: `${height - 75}px`,
    overflow: 'hidden'
  }
  scrollViewStyle.value = {
    height: `${height - 106}px`,
    overflowY: 'auto',
  }
  // #endif

  // #ifdef H5
  DynamicHeight.value = {
    height: `${height - 45}px`,
    overflow: 'hidden'
  }

  scrollViewStyle.value = {
    height: `${height - 72}px`,
    overflowY: 'auto',
  }
  // #endif
})

</script>

<style lang="scss" scoped>
.statistics-container {
  width: 100%;
  flex-direction: column;
  position: relative;

  .ment {
    .scroll-content {
      width: 100%;
      box-sizing: border-box;

      .content-item {
        word-break: break-all;
      }
    }
  }
}

.custom-tabs {
  width: 100%;

  // #ifdef APP-PLUS
  height: 80rpx;
  // #endif

  // #ifdef H5
  height: 70rpx;
  // #endif
  background: #fff;
  border-bottom: 1px solid #eee;
  z-index: 10;
  flex-shrink: 0;
  margin-top: -10px;

  .content-item {
    position: relative;
    display: flex;


    .tab-item {
      flex: 1;
      // #ifdef APP-PLUS
      padding: 10px 0;
      // #endif

      // #ifdef H5
      padding: 7px 0;
      // #endif
      text-align: center;
      color: #666;
      transition: color 0.3s ease;
      position: relative;

      &.active {
        color: #000;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%; // 缩小下划线宽度[4]()
          height: 2px;
          background: #007AFF;
          transform-origin: center;
          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

          /* 动态方向动画 */
          animation: underlineSlide 0.3s forwards;
          transform: translateX(calc((var(--current-index) - var(--prev-index)) * 40%));
        }
      }
    }
  }

}

@keyframes underlineSlide {
  0% {
    transform:
      translateX(calc((var(--prev-index) - var(--current-index)) * 100%)) scaleX(0.5); // 初始缩小效果[6]()
  }

  50% {
    transform: translateX(0) scaleX(1.2); // 弹性效果 
  }

  100% {
    transform:
      translateX(0) scaleX(1); // 恢复原始比例 
  }
}
</style>